<template>
	
	<el-row :gutter="5" v-if="!menuId">
		<el-col :span="toggle?0:6">
 			<div v-show="toggle==false">
			<xm-phase subOpType="select" :xm-product="xmProduct" :sel-project="selProject"  @check-change="onPhaseRowClick"  v-if="hadInit"/>
			</div>
			
		</el-col>
		<el-col :span="toggle?24:18">
			<xm-task-mng subOpType="select" :menuId="menuId" :multiple="multiple" :xm-product="xmProduct" :sel-project="selProject" :params="{ntype:'0',parentTaskid:parentTask?.id||''}" :parent-task="parentTask" @select="$emit('select',$event)">
				<template #expandBtn>
					<el-button :icon="toggle?'DArrowRight':'DArrowLeft'" @click="onToggleClick" plain title="展开/收起左边"/>
				</template>
			</xm-task-mng>
		</el-col>
	</el-row>
	<xm-task-mng v-else subOpType="select" :menuId="menuId" :multiple="multiple" :xm-product="xmProduct" :sel-project="selProject" :params="{ntype:'0',parentTaskid:parentTask?.id||''}" :parent-task="parentTask" @select="$emit('select',$event)"/>
</template>

<script>
import util from '@/components/mdp-ui/js/util';//全局公共库

import { mapState } from 'pinia'
import { useUserStore } from '@/store/modules/user'

 
// 在 Vue 3 中，可以使用 defineAsyncComponent 方法来创建异步组件
import { defineAsyncComponent } from 'vue';
 
 // 创建一个异步组件，它会从一个外部API动态导入组件
 const XmPhase = defineAsyncComponent(() =>
	 import('./XmPhase.vue') // 假设LazyComponent.vue是你想要懒加载的组件
 );
 // 创建一个异步组件，它会从一个外部API动态导入组件
 const XmTaskMng = defineAsyncComponent(() =>
	 import('./XmTaskMng.vue') // 假设LazyComponent.vue是你想要懒加载的组件
 );// 创建一个异步组件，它会从一个外部API动态导入组件 

export default {
	name:'XmTaskList',
	components: {
		XmPhase,XmTaskMng
	},
			props:['xmProduct','selProject','multiple','menuId'],
	computed: {
			...mapState(useUserStore,[
				'userInfo','roles'
			]),


			},
	watch: {

		},
	data() {
		return {
			parentTask:null,
				toggle: true,
				hadInit: false, 
		}//end return
	},//end data
	methods: {
			 onToggleClick(){
				this.toggle=!this.toggle
				if(!this.hadInit){
					this.hadInit=true
				}
			 },
		 onPhaseRowClick(task,checked){
			if(checked==true){
				this.parentTask=task
			}else{
				this.parentTask=null
			}
			 
		 }
	},//end method
	mounted() {


	}//end mounted
}

</script>

<style lang="less" scoped />
